<template>
  <div class="datamanage-wrapper">
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>
    <div class="app-container margin-content padding-content">
      <el-form :inline="true" :model="form" ref="searchForm" class="demo-form-inline">
        <el-form-item label="类型">
          <el-select v-model="form.typeId" placeholder="请选择类型" >
            <el-option v-for="item in options" :key="item.id" :label="item.typeName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代码">
          <el-input change-on-select v-model="form.code" placeholder="请输入代码" >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container margin-content padding-content">
      <el-table :height="scrollHeight" :key="tableKey" :data="list" v-loading="listLoading" element-loading-text="正在加载..." style="width: 100%">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="代码" property="code"></el-table-column>
        <el-table-column label="类型" property="typeName"></el-table-column>
        <el-table-column label="中文名称" property="nameZh"></el-table-column>
        <el-table-column label="英文名称" property="nameEn"></el-table-column>
      </el-table>
      <div class="pagination-container align-right">
        <el-pagination background :current-page="page.pageNum" v-if="isShow" :page-size="page.pageSize" :total="total" @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
  
  </div>
</template>

<script>
  import {
    getTypeList,
    getParamList
  } from '@/api/datasManage'
  export default {
    name: 'datasManage',
    components: {},
    data() {
      return {
        options: [],
        form: {
          typeId: null,
          code: null
        },
        scrollHeight: null,
        page: {
          pageNum: 1,
          pageSize: 20
        },
        total: 0,
        tableKey: 0,
        listLoading: false,
        list: [],
        isShow: false,
        dataListSelections: [],
        saveSetTimeoutSearch: null
      }
    },
    methods: {
      tableResize() {
        const _height = 320
        this.scrollHeight = document.body.scrollHeight - _height
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - _height
        }
      },
      getList() {
        if (!this.form.typeId) {
          this.$message({
            message: '请选择类型',
            type: 'warning',
            showClose: true
          })
          return
        }
        this.listLoading = true
        this.isShow = false
        let params = {
          typeId: this.form.typeId,
          code: this.form.code,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
        getParamList(params).then((res) => {
          console.log(res.data)
          if (res.data.code === 200) {
            this.isShow = true
            //   res = res.data
            this.list = res.data.data.dataList !== '' ? res.data.data.dataList : []
            this.total = res.data.data.total !== '' ? res.data.data.total : 0
            this.listLoading = false
          }
  
        })
      },
      // 页码查询
      handleCurrentChange(val) {
        this.page.pageNum = val
        this.getList()
      },
      getTypes() {
        getTypeList().then((res) => {
          console.log(res.data)
          if (res.data.code === 200) {
            this.options = res.data.data
          }
  
        })
      },
      doSearch() {
        this.page.pageNum = 1
        this.getList();
      },
      resetForm() {
        this.form = {
          typeId: null,
          code: null
        }
      }
    },
    created() {
  
      //   this.getOrgTree() //获取机构树选项
      this.tableResize()
      this.getTypes()
      // this.getList()
  
    },
    mounted() {
      // this.getList() //获取用户列表
    },
  }
</script>
